<template>
  <div id="detail">
    <detail-nav-bar />
    <scroll class="content" ref="scroll" :probe-type="3" :pull-up-load="true" @scroll="contentScroll">
      <detail-swiper :topImages="topImages"></detail-swiper>
      <detail-base-info :proInfo="proInfo"/>
      <div class="pro-details" v-html="detail"></div>
    </scroll>
    <back-top @click.native="backClick" v-show="isShowBackTop" />
    <detail-bottom-bar @addGwc="addGwc"/>
<!--    <toast :message="message" :show="show"></toast>-->
  </div>
</template>

<script>
  import DetailNavBar from "./childComps/DetailNavBar";
  import DetailSwiper from "./childComps/DetailSwiper";
  import DetailBaseInfo from "./childComps/DetailBaseInfo";
  import DetailInfo from "./childComps/DetailInfo";
  import DetailBottomBar from "./childComps/DetailBottomBar";

  import Scroll from 'components/common/scroll/Scroll'

  import {getProInfo} from "network/detail"
  // import Toast from "components/common/toast/Toast";

  import {itemListenerMixin,backTopMixin} from "common/mixin";

  import {mapActions} from 'vuex'


  export default {
    name: "Detail",
    mixins: [itemListenerMixin,backTopMixin],
    data() {
      return {
        id: 0,
        topImages: [],
        proInfo: {},
        detail: '',
        message: '',
        show: false
      }
    },
    components: {
      DetailNavBar,
      DetailSwiper,
      DetailBaseInfo,
      Scroll,
      DetailInfo,
      DetailBottomBar,
      // Toast
    },
    created() {
      // 1.保存传入的id
      this.id = this.$route.query.id
      // 2.根据id请求详情数据
      getProInfo(this.id).then(res => {
        if (res.backRes == 200){
          // 1.获取顶部轮播图
          const proInfo = res.proInfo
          this.topImages =  JSON.parse(proInfo.pics)
          this.proInfo =  proInfo
          this.detail =  proInfo.detail
          this.GetData();
        }else {
          alert(res.msg)
        }
      })

    },
    methods: {
      // ...mapActions(['addCart']),
      ...mapActions({
        add: 'addCart'
      }),
      GetData() {
        setTimeout(() => {
          this.$refs.scroll.refresh()
        }, 300);
      },
      contentScroll(position) {
        // 判断backTop是否显示
        this.isShowBackTop = position.y < -1000
      },
      addGwc() {
        const cartList = {}
        cartList.name = '新品'
        cartList.num = 2
        cartList.price = 36.8
        cartList.id = 123
        this.add(cartList).then(res => {
          // this.show = true
          // this.message = res
          // setTimeout(() => {
          //   this.show = false
          // },1500)
          this.$toast.show(res)

        })
        // this.$store.dispatch('addCart',cartList).then(res => {
        //   console.log(res)
        // })
      }
    }
  }
</script>

<style scoped>
  #detail {
    position: relative;
    z-index: 99;
    background-color: #fff;
    height: 100vh;

  }
  .content {
    height: calc(100% - 44px);
  }



</style>
